<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/common.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/api.js"></script>
</head>

<body>
    <div class="reg-header">
        <div class="header">
            <div class="logo">
                <a href="../html/index.html">
                    <img src="../img/logo-en.png" alt="">
                </a>
            </div>
            <div class="head-right">
                <span>Hi~</span>
                <ul>
                    <li id="loginBox">
                        [
                        <a href="./login.html" id="login">请登录</a>
                        ][
                        <a href="./register.html" id="reg">免费注册</a>
                        ]
                    </li>
                    <li>
                        <a href="#">MY有货</a>
                    </li>
                    <li>
                        <span class="iconfont icon-dingdan"></span>
                        <a href="#">我的订单</a>
                    </li>
                    <li>
                        <span class="iconfont icon-kefu"></span>
                        <a href="#">客服服务</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="reg-content">
        <div class="passport">
            <img src="../img/passport.png" alt="">
        </div>

        <div class="form">
            <h2>会员注册</h2>
            <p class="user">
                <input type="text" name="user" placeholder="用户名">
                <span class="userTips"><span class="circle"></span></span>
            </p>
            <p class="phone">
                <input type="text" name="phone" placeholder="手机号">
                <span class="phoneTips"><span class="circle"></span></span>
            </p>
            <p class="email">
                <input type="text" name="email" placeholder="邮箱">
                <span class="emailTips"><span class="circle"></span></span>
            </p>
            <div class="pwd">
                <input type="password" name="pwd" placeholder="密码">
                <span class="pwdTips"><span class="circle"></span></span>
                <p>
                    <span>低</span>
                    <span>中</span>
                    <span>高</span>
                </p>
            </div>
            <p class="btn">
                <input type="submit" id="btn" value="注册">
            </p>
            <p class="re">我已注册YOHO!BUY 有货账号<a href="./login.html">快速登录</a></p>
        </div>
    </div>

    <div class="yoho-footer">
        <div class="promise">
            <ul>
                <li>
                    <span class="iconfont icon-iconzhengpin"></span>
                    <span class=" red">100%</span>
                    <span class="rgbf">品牌正品</span>
                </li>
                <li>
                    <span class="icon-qitianwuliyoutuihuan iconfont"></span>
                    <span class=" red">7天</span>
                    <span class="rgbf">无理由退换货</span>
                </li>
                <li>
                    <span class="icon-liaotian iconfont"></span>
                    <a href="#">
                        <span class="red">便捷</span>
                        <span class="rgbf">在线客服</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-help">
            <ul>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>

            </ul>
        </div>

        <div class="footer-link">
            <div class="link-left">
                <a href="#">
                    <img src="../img/link1.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link2.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link3.png" alt="">
                </a>

            </div>
            <p class="links">
                <a href="#" rel="nofollow">返回首页</a>
                <span>|</span>
                <a href="#" rel="nofollow">YOHO!BUY 有货</a>
                <span>|</span>
                <a href="#" rel="nofollow">新力传媒</a>
                <span>|</span>
                <a href="#" rel="nofollow">联系我们</a>
                <span>|</span>
                <a href="#" rel="nofollow">商家入驻</a>
                <span>|</span>
                <a href="#" rel="nofollow">隐私条款</a>
                <span>|</span>
                <a href="#" rel="nofollow">友情链接</a>
                <span>|</span>
                <a href="#">潮流品牌大全</a>
                <span>|</span>
                <a href="#">潮流品类大全</a>
                <span>|</span>
                <a href="#">潮流产品大全</a>
                <span>|</span>
                <a href="#">潮流资讯</a>
                <span>|</span>
                <a href="#">穿衣搭配(男生版)</a>
                <span>|</span>
                <a href="#">穿衣搭配(女生版)</a>
                <span>|</span>
                <a href="#">潮流人气</a>
                <span>|</span>
                <a href="#">潮流潮品</a>
                <span>|</span>
                <a href="#">潮流视频</a>
                <span>|</span>
                <a href="#">苏公网安备 32010502010132号</a>
                <span>|</span>
                <a target="_blank" href="#">出版物经营许可证</a>
                <span>|</span>
                <a target=" _blank" href="#">苏B2-20120395</a>
                <span>|</span>
                <a target=" _blank" href="#">食品经营许可证</a>
            </p>

            <p class="copyright">
                CopyRight © 2007-2021 南京新与力文化传播有限公司
                <a class="rbg6" href="#">苏ICP备09011225号</a>
                NewPower Co. 版权所有 江苏省南京市建邺区嘉陵江东街18号南京国家广告产业园5栋17，18楼 025-87781000
            </p>
        </div>
    </div>

</body>

<script>
    $(function () {
        var lgc = getCookie("lgc");

        if (lgc) {
            $("#loginBox").html(`${lgc}<button class="quitBtn">退出</button>`).css("color", "red");
        }

        $(".icon-tianchongxing-").css({ cursor: "pointer" }).click(function () {
            location.href = "./cart.html";
        })

        $(".quitBtn").click(function () {
            quit();
        })

        function quit() {
            setCookie("lgc", "", -1);
            location.reload();
        }


        var userFlag = false;
        var pwdFlag = false;
        var phoneFlag = false;
        var emailFlag = false;

        var circle = $(".userTips").html();
        $("[name='user']").blur(async function () {
            var userReg = /^[a-zA-z_][0-9a-zA-z_]{5,12}$/;
            var user = $(this).val();
            $(".userTips").removeClass("dui cuo");
            if (user) {
                if (userReg.test(user)) {
                    var { status, detail } = await isExistUser({ user });
                    if (status) {
                        $(".userTips").html(circle + detail).addClass("dui");
                        userFlag = true;
                    } else {
                        userFlag = false;
                        $(".userTips").html(circle + detail).addClass("cuo");
                    }
                } else {
                    userFlag = false;
                    $(".userTips").html(circle + "6-12位，由数字，大小写字母和下划线组成且首字母不能为数字").addClass("cuo");
                }
            }
        });

        $("[name='phone']").blur(async function () {
            var phoneReg = /^1[3-9]\d{9}$/;
            var phone = $(this).val();
            $(".phoneTips").removeClass("dui cuo");
            if (phone) {
                if (phoneReg.test(phone)) {
                    var { status, detail } = await isExistPhone({ phone });
                    if (status) {
                        $(".phoneTips").html(circle + detail).addClass("dui");
                        phoneFlag = true;
                    } else {
                        phoneFlag = false;
                        $(".phoneTips").html(circle + detail).addClass("cuo");
                    }
                } else {
                    phoneFlag = false;
                    $(".phoneTips").html(circle + "手机号格式错误").addClass("cuo");
                }
            }
        });

        $("[name='email']").blur(async function () {
            var emailReg = /^\w+@\w+\.com$/;
            var email = $(this).val();
            $(".emailTips").removeClass("dui cuo");
            if (email) {
                if (emailReg.test(email)) {
                    var { status, detail } = await isExistEmail({ email });
                    if (status) {
                        $(".emailTips").html(circle + detail).addClass("dui");
                        emailFlag = true;
                    } else {
                        emailFlag = false;
                        $(".emailTips").html(circle + detail).addClass("cuo");
                    }
                } else {
                    emailFlag = false;
                    $(".emailTips").html(circle + "邮箱格式错误").addClass("cuo");
                }
            }
        });

        $("[name='pwd']").blur(async function () {
            var pwdReg = /^[0-9a-zA-z_]{6,12}$/;
            var pwd = $(this).val();
            $(".pwdTips").removeClass("dui cuo");
            if (pwd) {
                if (pwdReg.test(pwd)) {
                    $(".pwdTips").html(circle + "密码可以使用").addClass("dui");
                    pwdFlag = true;
                } else {
                    pwdFlag = false;
                    $(".pwdTips").html(circle + "6-12位，由数字，大小写字母和下划线组成").addClass("cuo");
                }
            }
        });

        $("#btn").click(async function () {
            var user = $("[name='user']").val();
            var pwd = $("[name='pwd']").val();
            var phone = $("[name='phone']").val();
            var email = $("[name='email']").val();
            if (userFlag && pwdFlag && emailFlag && phoneFlag) {
                var { status, detail } = await register({ user, pwd, email, phone })
                if (status) {
                    if (confirm(detail + "是否前往登录")) {
                        location.href = "./login.html";
                    }
                }
            } else {
                alert("请填写正确的信息！")
            }
        })
    })



</script>

</html>